<template>
  <div class="forum-container" ref="forum">
    <div class="main">
      <!-- 发布帖子 -->
      <!-- <button>发布帖子</button> -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- <el-tab-pane label="默认排序" name="first">
          <DefaultForum></DefaultForum>
        </el-tab-pane> -->
        <el-tab-pane label="最新话题" name="second">
          <DefaultForum></DefaultForum>
        </el-tab-pane>
        <el-tab-pane label="你问我答" name="third">
          <ChatRoom></ChatRoom>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import DefaultForum from '@/views/front/center/forum/DefaultForum.vue'
export default {
  name: "myForum",
  components:{
    DefaultForum
  },
  data() {
    return {
      // 导航名字
      activeName: 'second',
      // 默认排序内容
      default_forum:[{
        id:1,
        title:'vue-cli的怎么创建vue项目',
        good:'123'
      },{
        id:2,
        title:'vue-cli的怎么创建vue项目',
        good:'123'
      },{
        id:3,
        title:'vue-cli的怎么创建vue项目',
        good:'123'
      },{
        id:4,
        title:'vue-cli的怎么创建vue项目',
        good:'123'
      },
    ]
    };
  },
  mounted() {
    // 1.响应式内边距
    this.listenWidth();
    // 监听浏览器窗口变化
    window.onresize = () => {
      let w = document.body.clientWidth;
      if (w < 600) {
        return (() => {
          this.$refs["forum"].style.padding = "10px";
        })();
      } else {
        return (() => {
          this.$refs["forum"].style.padding = ".6rem 5rem .6rem 5em";
        })();
      }
    };
   
  },
  methods: {
    // 1.响应式内边距
    listenWidth() {
      let w = document.body.clientWidth;
      if (w < 500) {
        return (() => {
          this.$refs["forum"].style.padding = "10px";
        })();
      } else {
        return (() => {
          this.$refs["forum"].style.padding = "0.6rem 7.5rem 0.6rem 7.5rem ";
        })();
      }
    },
    handleClick(tab, event) {
        console.log(tab, event);
      }
  },
  //通过路由规则，进入该组件时被调用
  beforeRouteEnter(to,from,next) {
      if(localStorage.getItem('userInfo') == null){
        console.log('未登录');
      alert('未登录请先登录')
      next('/login')
      }else{
        
        next()
      }
  
  },
};
</script>
<style lang="less" scoped>
.forum-container {
  padding: 0.6rem 7.5rem 0.6rem 7.5rem ;
  background-color: var(--bgColor);
  .main{
    background-color: var(--cardColor);
    padding: 20px;
    // 默认排序开始
    .default_forum_item{
      font-size: 24px !important;
      display: flex;
      margin-top: 20px;
      .rank{
          height: 44px;
          width: 44px;
          background-color: var(--bgColor);
          text-align: center;
          line-height: 44px;
          color: var(--font_2);
          border-radius: 4px;
          margin-right: 20px;
          
        }
        .title{
          height: 44px;
          width: 80%;
          line-height: 44px;
          overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .good{
          width: auto;
          height: 44px;
          line-height: 44px;
          color: var(--font_2);
        }
    }
    // 默认排序结束
      li:nth-child(1) > .rank{
        background-color:#fe2d46 ;
        
      }
      li:nth-child(2) > .rank{
        background-color:#ff6600 ;
        
      }
      li:nth-child(3) > .rank{
        background-color:#faa90e ;
      }
  }

}
</style>
